<template>
  <div>
    <!-- 插槽有 默认插槽 具名插槽 作用域插槽 -->
    <div class="card" v-for="(e, i) in cards" :key="i">
      <div>{{ e.title }}</div>
      <ElDivider></ElDivider>
      <!-- <div>content...</div> -->
      <slot name="content"></slot>
      <ElDivider></ElDivider>
      <slot :xxx="e.title" :yyy="sampleD" ></slot>
      <!-- {xxx:...,yyy:...} -->
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'MyCards',
  props: {
    sampleP: {
      type: Number,
      default: 0
    },
    cards: {
      type: Array<any>,
      default: () => {
        return [{ title: 'abc' }]
      }
    }
  },
  data() {
    return {
      sampleD: 'value'
      //   cards: [{ title: 'abc' }, { title: 'def' }, { title: 'ghi' }]
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="css" scoped>
.card {
  width: 200px;
  height: 200px;
  border: solid 1px goldenrod;
}
</style>
